<!-- comment -->
<div id="comments" class="Card comment-box-padding">
    <div id="respond-post-13" class="respond showBtn">
        <form id="comment-form" role="form">
            <div class="comment-box">
                <div class="comment-tools collapse show">
                    <div class="row row-cm">
                        <div class="col col-cm order-first" style="overflow: hidden;">
                            <div class="emoji-box text-right">

                            </div>
                        </div>
                        <div class="bg-white">
                            <a href="javascript:;" class="emoji-btn" title="Emoji 表情"><i class="fa fa-smile-o fa-2x"
                                                                                         name="emoji"></i></a>
                        </div>
                    </div>
                </div>
                <div class="comment-textarea-box">
                    <textarea rows="8" cols="50" name="content" id="textarea" class="textarea comment-textarea"
                              required=""></textarea>
                </div>
                <div class="comment-form collapse show">
                    <div class="row comment-form-fields">
                        <div class="col order-first">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                        <span class="input-group-text bg-white" id="ico-name"><i class="fa fa-user-o"
                                                                                                 aria-hidden="true"></i></span>
                                </div>
                                <input type="hidden" name="aid" value="{{.id}}">
                                <input type="text" name="name" id="author" class="form-control" placeholder="昵称"
                                       value="" aria-label="Username" aria-describedby="ico-name" required="">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                        <span class="input-group-text bg-white" id="ico-email"><i
                                                    class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
                                </div>
                                <input type="email" name="email" id="mail" class="form-control" placeholder="邮箱"
                                       value="" aria-label="Email" aria-describedby="ico-email" required="">
                            </div>
                        </div>
                        <div class="col order-last">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                        <span class="input-group-text bg-white" id="ico-url"><i
                                                    class="fa fa-internet-explorer" aria-hidden="true"></i></span>
                                </div>
                                <input type="url" name="link" class="form-control" placeholder="网站(非必填)" value=""
                                       aria-label="Email" aria-describedby="ico-url">
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn comment-btn">
                        <div id="submit"></div>
                    </button>
                </div>
            </div>
            <input type="hidden" name="_" value="ee640813ef558f5f726bd68da857f9d9"></form>
    </div>

    <h6>已有 {{comment .id}} 条评论</h6>

    <ol class="comment-list">
        {{range .comments}}
            <li id="comment-{{.Id}}" class="comment-body comment-parent comment-odd">
                <div class="comment-author">
                    <div>
                        <div class="row comment-row comment-mg">
                            <div class="comment-show-con-img">
                                <img class="avatar"
                                     src="{{gavatar .Email}}"
                                     alt="{{.Name}}" width="48" height="48"></div>
                            <div class="col order-last comment-col">
                                <div class="row comment-row">
                                    <div class="comment-show-con-list clearfix">
                                        <div class="pl-text clearfix">
											<span class="comment-author">
												<a href="{{.Link}}" rel="external nofollow">{{.Name}}</a>											</span>
                                            <a href="{{.Link}}" target="_blank"><i
                                                        class="fa fa-internet-explorer"></i></a> <span>:</span>
                                            <span class="zface-box">
                                        {{.Content}}
                                        </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row comment-row date-dz">
                                    <div class="col order-last comment-col comment-reply">
                                        <a href="#">{{tsc .Date true}}&nbsp;</a>|
                                        <a rel="nofollow" onclick='Comment({{.Name}},{{.Email}})'>回复</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        {{end}}
    </ol>

    <script src="/static/admin/layer/layer.js"></script>
    <script>
        function Comment(name, email) {
            $("#textarea").html("@" + name + ", ");
        }

        function ValidateForm() {
            var content = $("#textarea").val();
            var name = $(" input[ name='name' ] ").val();
            var email = $(" input[ name='email' ] ").val();
            var link = $(" input[ name='link' ] ").val();
            // 验证规则开始
            if (content.length < 1) {
                layer.msg("内容太少了哦！", {time: 2000});
                return false;
            }
            if (name.length === 0) {
                layer.msg("名称项不能为空！", {time: 2000});
                return false;
            }
            if (email.length === 0) {
                layer.msg("邮箱项不能为空！", {time: 2000});
                return false;
            } else {
                var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
                if (!reg.test(email)) {
                    layer.msg("邮箱格式不正确哦！", {time: 2000});
                    return false;
                }
            }
            if (link.length > 0) {
                var regWeb = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
                if (!regWeb.test(link)) {
                    layer.msg("网址格式不正确,请加上http(s)://", {time: 2000});
                    return false;
                }
            }
            return true;
        }

        function wait(timeout) {
            if (timeout === 0) {
                location.reload();
            } else {
                setTimeout("wait(0)", 1000);
            }
        }

        $("#submit").click(function () {
            if (ValidateForm()) {
                const postData = $("#comment-form").serialize();
                $.post("/api/comment/add", postData, function (res) {
                    if (res.Error === 0) {
                        layer.msg(res.Msg, {time: 2000});
                        wait(1);
                    } else {
                        layer.msg(res.Title + res.Msg, {
                            icon: 2,
                            time: 2000
                        });
                    }
                }, "json");
                return false;
            }
        });
    </script>
</div>